import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:openim_common/openim_common.dart';
import 'group_payment_logic.dart';

class GroupPaymentPage extends StatelessWidget {
  final logic = Get.find<GroupPaymentLogic>();

  GroupPaymentPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: TitleBar.back(
        title: '进群支付',
      ),
      body: Obx(() => Column(
        children: [
          // 群聊信息展示
          Container(
            padding: EdgeInsets.all(16.w),
            child: Row(
              children: [
                ClipRRect(
                  borderRadius: BorderRadius.circular(6.r),
                  child: ImageUtil.networkImage(
                    url: logic.groupInfo.value?.faceURL ?? '',
                    width: 60.w,
                    height: 60.w,
                  ),
                ),
                SizedBox(width: 12.w),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        logic.groupInfo.value?.groupName ?? '',
                        style: TextStyle(
                          fontSize: 16.sp,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      SizedBox(height: 4.h),
                      Text(
                        '${logic.groupInfo.value?.memberCount ?? 0}人',
                        style: TextStyle(
                          fontSize: 12.sp,
                          color: Colors.grey[600],
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
             // 群简介展示（新增）
          if (logic.groupInfo.value?.introduction != null && 
              logic.groupInfo.value!.introduction!.isNotEmpty)
            Container(
              margin: EdgeInsets.symmetric(horizontal: 16.w),
              padding: EdgeInsets.all(16.w),
              decoration: BoxDecoration(
                color: Colors.grey[50],
                borderRadius: BorderRadius.circular(8.r),
                border: Border.all(color: Colors.grey[200]!),
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    '群简介',
                    style: TextStyle(
                      fontSize: 14.sp,
                      fontWeight: FontWeight.w500,
                      color: Colors.grey[700],
                    ),
                  ),
                  SizedBox(height: 8.h),
                  Text(
                    logic.groupInfo.value!.introduction!,
                    style: TextStyle(
                      fontSize: 14.sp,
                      color: Colors.grey[800],
                      height: 1.4,
                    ),
                    maxLines: 3,
                    overflow: TextOverflow.ellipsis,
                  ),
                ],
              ),
            ),
          
          SizedBox(height: 16.h),
          // 支付金额
          Container(
            margin: EdgeInsets.symmetric(horizontal: 16.w, vertical: 8.h),
            padding: EdgeInsets.all(16.w),
            decoration: BoxDecoration(
              color: Colors.grey[50],
              borderRadius: BorderRadius.circular(8.r),
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  '进群费用',
                  style: TextStyle(fontSize: 16.sp),
                ),
                Text(
                  '\$${logic.groupFee.value}',
                  style: TextStyle(
                    fontSize: 18.sp,
                    fontWeight: FontWeight.bold,
                    color: Colors.red,
                  ),
                ),
              ],
            ),
          ),
          
          Spacer(),
          
          // 支付按钮
          Container(
            padding: EdgeInsets.all(16.w),
            child: SizedBox(
              width: double.infinity,
              height: 44.h,
              child: ElevatedButton(
                onPressed: logic.isPaymentProcessing.value ? null : () => logic.payAndJoinGroup(),
                child: logic.isPaymentProcessing.value
                    ? const CircularProgressIndicator(strokeWidth: 2)
                    : Text('立即支付并入群（\$${logic.groupFee.value.toStringAsFixed(2)}）'),
              ),
            ),
          ),
        ],
      )),
    );
  }
}